<script
	lang="ts"
	setup
>
import { sysuserListGet, sysuserUserIdDelete } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import SearchInput from '@/components/SearchInput.vue'
import SubHeader from '@/components/SubHeader.vue'
import { useRenderAction } from '@/hooks/useRenderActions'
import { adminColumns } from '@/tableColumns/admin'
import AddAdmin from '@/views/console/system/components/AddAdmin.vue'
import AdminDetail from '@/views/console/system/components/AdminDetail.vue'
import { Add12Regular } from '@vicons/fluent'
import { type DataTableProps, NIcon } from 'naive-ui'
import { ref } from 'vue'
import ResetPassword from './components/ResetPassword.vue'

const table = ref()
const showDetail = ref(false)
const userId = ref<number | null>(null)
const showAddModal = ref<boolean>(false)
const currentItem = ref<any>({})
const filterPrams = ref({
	keyword: '',
})
const showResetModal = ref(false)
const currentResetUser = ref<any>(null)

const tableProps = ref<DataTableProps>({
	scrollX: 1200,
	rowKey: (item) => item.userId,
	columns: (adminColumns || []).concat([
		{
			title: '操作',
			key: 'actions',
			width: 340,
			fixed: 'right',
			align: 'center',
			render: item => useRenderAction([
				{
					label: '详情',
					type: 'default',
					round: true,
					size: 'small',
					onClick: () => onShowDetail(item.userId)
				},
				{
					label: '编辑',
					type: 'primary',
					round: true,
					size: 'small',
					onClick: () => onEdit(item)
				},
				{
					label: '重置密码',
					type: 'warning',
					round: true,
					size: 'small',
					onClick: () => onResetPassword(item)
				},
				{
					label: '删除',
					type: 'error',
					round: true,
					size: 'small',
					onClick: () => onDelete(item)
				}
			])
		}
	])
})

function onShowDetail(id: number) {
	userId.value = id
	showDetail.value = true
}

function reloadTable() {
	showAddModal.value = false
	table.value.reload();
}

function onAdd() {
	currentItem.value = undefined
	showAddModal.value = true
}

function onEdit(item: any) {
	currentItem.value = item
	showAddModal.value = true
}

async function onDelete(item: any) {
	const dialog = window.$dialog.warning({
		title: '确认删除',
		content: `确定要删除管理员"${item.userName}"吗？`,
		positiveText: '确定',
		negativeText: '取消',
		loading: false,
		closeOnEsc: false,
		maskClosable: false,
		onPositiveClick: async () => {
			dialog.loading = true
			try {
				const { code } = await sysuserUserIdDelete(item.userId)
				if (code === 200) {
					window.$message.success('删除成功')
					table.value?.reload()
					dialog.loading = false
					return true
				}
				return false
			} catch (error) {
				window.$message.error('删除失败')
				dialog.loading = false
				return false
			}
		}
	})
}

function onResetPassword(item: any) {
	currentResetUser.value = item
	showResetModal.value = true
}

</script>

<template>

	<n-layout>
		<sub-header>
			<template #right>
				<SearchInput
					v-model:value="filterPrams.keyword"
					placeholder="手机，邮箱，昵称"
					width="210"
				/>

				<n-button
					type="primary"
					@click="onAdd"
				>
					<template #icon>
						<n-icon>
							<Add12Regular/>
						</n-icon>
					</template>
					添加管理员
				</n-button>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="sysuserListGet"
			/>
		</n-layout>
		<AdminDetail
			v-model:show="showDetail"
			:id="userId || 0"
			@update:list="reloadTable"
		/>
		<AddAdmin
			v-model:show="showAddModal"
			:data="currentItem"
			@update:list="reloadTable"
		/>
		<ResetPassword
			v-model:show="showResetModal"
			:data="currentResetUser"
			@update:list="reloadTable"
		/>
	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;

	header {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
